<template>
<div>

</div>
   
  
</template>            
   
<script setup lang="ts">
import ContextMenu from '@imengyu/vue3-context-menu';
import { getDraggableNumber, getExhibitsHeightRest } from '@/utils/getRemComputed';
import { ref, reactive } from 'vue'; 
import { exbitMenuShow } from '@/hooks/menuHooks';
import { useProjectStore } from '@/store';

const emit = defineEmits(['emitChildDraggableStyle', 'emitChildDraggable']);
const store = useProjectStore();
const contextMenuTrigger = ref();
const parentLock = ref(true);
const props = defineProps({
  parentId: {
    type: Number,
  },
  info: {
    type: Object,
  },
  index: {
    type: Number,
  },
  list: {
    type: Object,
  },
  childId: {
    type: Number,
  },
  parentIndex: {
    type: Number,
  },
});
const dragging = (draggingInfo: any) => {
  emit('emitChildDraggable', draggingInfo, props.index); //传递当前展品图距离相对父元素的xy偏移量变化
};
const resizing = (draggingInfo: any) => { 
  // emit('emitDraggable', props.indexs, draggingInfo);
  emit('emitChildDraggableStyle', draggingInfo, props.index); //设置当前展品图距离相对父元素的宽高变化
};
const resizeEnd = (draggingInfo: any) => {
  // emit('emitDraggable', props.indexs, draggingInfo);
  emit('emitChildDraggableStyle', draggingInfo, props.index); //设置当前展品图距离相对父元素的宽高变化
};
const preventDefaultDrag = (event) => {
  event.stopPropagation();
};
const onContextMenuChild = (e:any) => {
  e.preventDefault();
  store.contextmenuchildId = props.childId;
  store.contextmenuGroupId = props.parentIndex;
  store.contextmenuExhibitId = props.index;
  exbitMenuShow(e) 
};
const getParentX = (indexs: number) => {
  let x = 0;
  for (let index = 0; index < indexs; index++) {
    // const element = array[index]; 
    x = x + props.list[index].width;
  }
  let ParentX = getDraggableNumber(x);   
  // console.log(ParentX);     
  return ParentX;  
};  
</script>            
 
<style lang="less" scoped>  
.exhibits-img {   
  position: relative;  
  // position: absolute;  
  z-index: 66; 
  img { 
    width: 100%; 
    height: 100%;
    object-fit: contain;
  }
}
.active {
  z-index: 999;
}
:deep(.vdr-container) {
  z-index: 6;
}
.mp-box{ 

  position: absolute;
  bottom: -64px;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  width: 100%;
  max-width: 120px;
  height: 32px;
  background: #000;
  line-height: 32px; 
  text-align: center;
  padding: 0 10px;
  
}
</style>